<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>请假管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            font-size: 24px;
        }
        .sidebar {
            width: 300px;
            background-color: #333;
            color: white;
            padding: 20px;
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid white;

        }
        .sidebar a {
            height: 40px;
            width: 70%;
            color: white;
            text-decoration: none;
            display: block;
            margin: 10px 0;
            font-size: 18px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }

        .sidebar a:hover {
            height: 40px;
            width: 70%;
            text-decoration: underline;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }
        .content {
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding-top: 60px;
            border-left: 1px solid #ccc;
        }

        .hidden {
            display: none;
        }
        .content > div {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .logout {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #333;
            text-decoration: none;
            font-size: 18px;
            border: 2px solid #333;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #f0f0f0;
        }
        .logout:hover {
            text-decoration: underline;
            background-color: #ddd;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 18px;
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        form {
            display: flex;
            flex-direction: column;
            font-size: 18px;
        }
        form label {
            margin-bottom: 5px;
        }
        form input[type="text"], form input[type="number"] {
            padding: 5px;
            margin-bottom: 10px;
            font-size: 18px;
        }
        .submit-button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 18px;
            width: 150px;
            text-align: center;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .submit-button:hover {
            background-color: #45a049;
        }
        .delete-button {
            background-color: #ff4d4d;
            color: white;
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            cursor: pointer;
        }

        .delete-button:hover {
            background-color: #ff1a1a;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function toggleLeaveList() {
            var leaveListContent = document.getElementById('leaveListContent');
            var addLeaveContent = document.getElementById('addLeaveContent');
            leaveListContent.classList.remove('hidden');
            addLeaveContent.classList.add('hidden');
        }

        function toggleAddLeave() {
            var leaveListContent = document.getElementById('leaveListContent');
            var addLeaveContent = document.getElementById('addLeaveContent');
            leaveListContent.classList.add('hidden');
            addLeaveContent.classList.remove('hidden');
        }

        function deleteLeave(leaveId) {
            if (confirm("确定要删除这条请假记录吗？")) {
                $.ajax({
                    url: '/leave/delete/' + leaveId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 1 && response.message === "成功") {
                            alert("删除成功！");
                            loadLeaveList(); // 重新加载请假列表
                        } else {
                            alert("删除失败：" + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("删除请求失败：" + error);
                    }
                });
            }
        }

        function loadLeaveList() {
            $.ajax({
                url: '/leave/getAll',
                type: 'GET',
                success: function(data) {
                    if (data.code === 1 && data.message === "成功") {
                        var leaveList = data.data;
                        var tbody = document.querySelector('#leaveListContent tbody');
                        tbody.innerHTML = ''; // 清空现有内容
                        $.each(leaveList, function(index, leave) {
                            var row = "<tr>";
                            row += "<td>" + (index + 1) + "</td>";  // 使用索引值显示行号，从1开始
                            row += "<td>" + leave.leaveId + "</td>";
                            row += "<td>" + leave.courseId + "</td>";
                            row += "<td>" + leave.reason + "</td>";
                            row += "<td>" + leave.daynum + "</td>";
                            row += "<td>" + leave.applytime + "</td>";
                            row += "<td>" + leave.status + "</td>";
                            row += "<td>" + (leave.audittime || '') + "</td>";
                            row += "<td>" + (leave.opinion || '') + "</td>";
                            row += "<td>";
                            row += '<a href="javascript:void(0)" onclick="deleteLeave(\'' + leave.leaveId + '\')" class="delete-button">删除</a>';
                            row += "</td>";
                            row += "</tr>";
                            tbody.innerHTML += row;
                        });
                    }
                }
            });
        }

        // 页面加载完成后调用loadLeaveList函数
        $(document).ready(function() {
            loadLeaveList();
        });

    </script>
</head>
<body>
<div class="sidebar">
    <h3>菜单</h3>
    <a href="javascript:void(0)" onclick="toggleLeaveList()">个人请假信息列表</a>
    <a href="javascript:void(0)" onclick="toggleAddLeave()">添加请假表</a>
</div>
<div class="content">
    <a href="CM01_login.jsp" class="logout">退出登录</a>
    <div id="leaveListContent" class="hidden">
        <h2>个人请假信息列表</h2>
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>请假编号</th>
                <th>请假课程</th>
                <th>请假事由</th>
                <th>天数</th>
                <th>请假时间</th>
                <th>状态</th>
                <th>审核时间</th>
                <th>审核意见</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过AJAX加载 -->
            </tbody>
        </table>
    </div>


    <div id="addLeaveContent" class="hidden">
        <h2>添加请假单</h2>
        <form id="addLeaveForm">
            <label for="courseId">请假课程:</label>
            <input type="text" id="courseId" name="courseId" required><br>

            <label for="reason">请假事由:</label>
            <input type="text" id="reason" name="reason" required><br>

            <label for="daynum">请假天数:</label>
            <input type="number" id="daynum" name="daynum" required><br>

            <input type="button" value="提交" onclick="submitLeaveForm()" class="submit-button">
        </form>
    </div>
</div>
<script>

    function submitLeaveForm() {
        var formData = new FormData(document.getElementById('addLeaveForm'));

        // 将FormData转换为JSON对象,使Controller使用@RequestBody能接收到
        var jsonData = {};
        formData.forEach((value, key) => {
            jsonData[key] = value;
        });

        fetch('/leave/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(jsonData)
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1 && data.message === "成功") {
                    alert("请假单提交成功！");
                    toggleLeaveList(); // 切换到请假列表页面
                    loadLeaveList()
                } else {
                    alert("请假单提交失败：" + data.message);
                }
            })
            .catch(error => {
                alert("请假单提交请求失败：" + error);
            });
    }
</script>
</body>
</html>